body{
    font-family: 'PingFang SC','Heiti SC','微软雅黑',Helvetica,Arial;
    font-size: 12px;
    color: #684029;
    overflow-x: hidden;
}
.banner{
    width: 1050px;
    height: 520px;
    margin: 10px auto 0;
}
.banner .left-img-box{
    width: 924px;
    height: 520px;
    float: left;
    position: relative;
    img{
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    }
}
.banner .left-img-box img, .banner ul li img{
    width: 100%;
    height: 100%;
    background: #eee;
}
.right-list{
    height: 520px;
    float: right;
    width: 90px;
    position: relative;
}
.banner ul{
    width: 90px;
    position: absolute;
    bottom: 0;
    left: 0;
    max-height: 280px;
    overflow: hidden;
}
.banner ul li{
    height: 50px;
    width: 90px;
    margin-top: 20px;
    cursor: pointer;
}
.banner ul li.active{
    border: 1px solid #C69C6D;
    height: 48px;
    width: 88px;
}
.content-box{
    min-height: 201px;
    width: 1050px;
    margin: 0 auto;
    padding-bottom: 50px;
}
.pro-details-cont{
    position: relative;
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: #D8D8D8 solid 1px;
}
.details-content-left{
    width: 484px;
}
.details-content-left, .details-content-right{
    float: left;
    font-size: 12px;
}
.pro-details-title{
    font-size: 20px;
    line-height: 28px;
    padding-top: 20px;
    font-weight: normal;
}
.sub-title{
    min-height: 17px;
    line-height: 17px;
    color: #FF3933;
}
.pro-details-label{
    margin: 20px 0 14px;
    font-size: 0;
}
.pro-details-label a{
    display: inline-block;
    line-height: 18px;
    color: #D5BFA7;
    padding: 0 10px;
    border: 1px solid #D5BFA7;
    border-radius: 100px;
    margin-right: 6px;
    font-size: 12px;
}
.details-constituent{
    overflow: hidden;
    margin-bottom: 14px;
}
.details-constituent li{
    float: left;
    height: 50px;
    line-height: 50px;
    color: #684029;
}
.details-constituent li img{
    display: inline-block;
    height: 50px;
    width: 50px;
    vertical-align: middle;
}
.details-constituent li span{
    display: inline-block;
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}
.pro-details-explain{
    font-size: 12px;
    width: 484px;
    line-height: 2em;
    min-height: 30px;
}
.details-distribution{
    padding: 12px 0;
}
.distribution-exist{

}
.details-distribution li{
    height: 34px;
    line-height: 34px;
}
.details-distribution li.distribution-exist i{
    background-position: -118px -2px;
    height: 20px;
    width: 19px;
}
.details-distribution li i{
    display: inline-block;
    vertical-align: middle;
    height: 34px;
    width: 30px;
    background-image: url(../../../pages/imgs/21cake-develop/icon.png);
    background-repeat: no-repeat;
    background-size: 240px auto;
    margin: 0 10px;
}
.details-distribution span{
    display: inline-block;
    margin-left: 3px;
}
.details-distribution li.distribution-sweet i{
    background: url(../../../pages/imgs/21cake-develop/sweet.png) center no-repeat;
    background-size: 22px auto;
    width: 20px;
    margin-right: 2px;
}
.details-distribution li.distribution-sweet span.sweet-icon i:first-child, .details-distribution li.distribution-sweet span.sweet-icon{
    margin-left: 0;
}
.details-distribution li.distribution-sweet span.sweet-icon i.active{
    background: url(../../../pages/imgs/21cake-develop/sweet_02.png) no-repeat center;
}
.details-distribution li.distribution-sweet span.sweet-icon i{
    background: url(../../../pages/imgs/21cake-develop/sweet_01.png) no-repeat center;
    height: 20px;
    width: 20px;
    margin: 0 7px;
}
.pro-details-cont{
    position: relative;
    overflow: hidden;
    padding-bottom: 10px;
    border-bottom: #D8D8D8 solid 1px;
}
.details-content-right{
    width: 500px;
    margin-left: 65px;
    position: relative;
    overflow: auto;
}
.details-price{
    position: absolute;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    z-index: 10;
    top: 165px;
    left: 335px;
    color: #C69C6D;
}
.details-price span{
    font-size: 26px;
}
.details-img-box{
    display: none;
    overflow: hidden;
    padding-top: 28px;
    margin-bottom: 24px;
    min-height: 80px;
}
.details-img-box.active{
    display: block
}
.details-options{
    margin-top: 8px;
}
.fl-left{
    float: left;
    margin-left: 28px;
}
.details-options li{
    height: 25px;
    line-height: 25px;
    margin: 5px 0;
    font-size: 12px;
}
.fl-left li i{
    margin-right: 8px;
}
.details-options li.details-options-size i{
    background-position: -210px -5px;
}
.details-options li.details-options-unmber i{
    background-position: -235px -5px;
}
.details-options li.details-options-laid i{
    background-position: -260px -5px;
}
.details-options li.details-options-time i{
    background-position: -285px -5px;
}
.details-options li i{
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background-image: url(../../../pages/imgs/21cake-develop/icon.png);
    background-size: 310px 120px;
    background-repeat: no-repeat;
}
.details-Specifications-size, .details-Specifications-size-extra, .details-markup{
    overflow: hidden;
}
.details-Specifications-size dt, .details-Specifications-size-extra dt{
    height: 30px;
    width: 50px;
}
.details-Specifications-size dd, .details-Specifications-size-extra dd, .details-markup dd{
    width: 450px;
}
.details-Specifications-size dd ul, .details-Specifications-size-extra dd ul, .details-markup dd ul{
    overflow: hidden;
}
.details-Specifications-size dd li, .details-Specifications-size-extra dd li, .details-markup dd li{
    float: left;
    min-width: 60px;
    height: 30px;
    margin-left: 15px;
    text-align: center;
    color: #7A5844;
    margin-bottom: 14px;
    cursor: pointer;
}
.details-Specifications-size dd li a, .details-Specifications-size-extra dd li a, .details-markup dd li a{
    display: block;
    height: 28px;
    border: 1px solid #e7e0dd;
    position: relative;
    padding: 0 5px;
    line-height: 30px;
}
.details-Specifications-size dd li a i, .details-Specifications-size-extra dd li a i, .details-markup dd li a i{
    display: block;
    height: 10px;
    width: 10px;
    position: absolute;
    top: 0;
    left: 0;
}
.details-Specifications-size dd li a.active, .details-Specifications-size-extra dd li a.active, .details-markup dd li a.active{
    border-color: #684029;
}
.details-Specifications-size dd li a.active i, .details-Specifications-size-extra dd li a.active i, .details-markup dd li a.active i{
    background: url(../../../pages/imgs/21cake-develop/icon.png) no-repeat;
    background-position: 0px -40px;
    background-size: 310px 120px;
}
.details-img-box .details-img{
    float: left;    
    width: 300px;
    height: 170px;
    display: block;
}
.details-Specifications-size dt, .details-Specifications-size-extra dt, .details-Specifications-size dd, .details-Specifications-size-extra dd, .details-markup dt, .details-markup dd{
    float: left;
    line-height: 30px;
}
.details-markup dt{
    width: 50px;
    height: 40px;
    line-height: 40px;
}
.details-markup dd li{
    width: 40px;
    height: 40px;
    min-width: 40px;
}
.details-markup dd li a{
    display: block;
    height: 40px;
    width: 40px;
    padding: 0;
    overflow: hidden;
}
.details-markup li img{
    width: 90%
}
.details-button{
    width: 344px;
    height: 40px;
    font-size: 13px;
}
.details-button button{
    width: 167px;
    height: 30px;
    line-height: 30px;
}
.details-but-buy{
    float: left;
    background: #F4F4F4;
    color: #7A5844;
}
.details-but-buy, .details-but-cart{
    height: 40px; 
    width: 238px;
    line-height: 40px;
    text-align: center;
    font-size: 13px;
    border: none;
}
.details-but-buy:hover{
    background: #efefef;
}
.details-but-cart{
    float: right;
    background: #684029;
    color: #fff;
}
.details-but-cart:hover{
    background: #482618;
}
.details-introduction{
    margin-top: 12px;
    height: auto;
}
.details-introduction img{
    text-align: left;
    display: block;
    max-width: 100%;
}
.details-introduction p, .details-introduction a, .details-introduction span, .details-introduction dl, .details-introduction dt, .details-introduction dd, .details-introduction ul, .details-introduction ol, .details-introduction li, .details-introduction h1, .details-introduction h2, .details-introduction h3, .details-introduction h4, .details-introduction h5, .details-introduction h6, .details-introduction pre, .details-introduction code, .details-introduction form, .details-introduction fieldset, .details-introduction legend, .details-introduction input, .details-introduction button, .details-introduction blockquote, .details-introduction th, .details-introduction tr, .details-introduction td{
    line-height: 2em;
    color: #684029;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}
.recommend-box{
    overflow: hidden;
    margin: 40px auto 50px;
    border: 1px solid #E1E1E1;
}
.recommend-box h2{
    background: #FBFBFB;
    font-size: 14px;
    line-height: 40px;
    padding-left: 18px;
    font-weight: normal
}
.recommend-box ul{
    overflow: hidden;
    margin: 0 18px;
    height: 285px;
}
.recommend-box li{
    margin: 20px 35px;
    float: left;
    width: 180px;
    text-align: center;
    position: relative;
    height: 242px;
    overflow: hidden;
}
a:visited, a:link, a{
    color: #684029;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
.recommend-box li img{
    max-width: 180px;
}
.recommend-box li h4{
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8B663C;
}
.recommend-box li p{
    font-size: 14px;
    color: #CBA375;
}
.recommend-cart{
    opacity: 0;
    position: absolute;
    background: rgba(173, 149, 117,.6);
    top: 126px;
    left: 0;
    width: 100%;
    height: 50px;
    font-size: 12px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.recommend-box li .recommend-cart p{
    color: #fff;
    font-size: 12px;
    line-height: 17px;
    width: 128px;
    height: 34px;
    padding-top: 9px;
    margin-left: 10px;
    overflow: hidden;
    float: left;
    text-align: left;
    a{
        color: #fff;
    }
}
.recommend-box li .recommend-cart button{
    height: 30px;
    width: 30px;
    background: #fff;
    float: left;
    margin-top: 10px;
    margin-left: 4px;
    border: none;
}
.recommend-box li .recommend-cart button i{
    background: #fff url(../../../pages/imgs/21cake-develop/icon.png) no-repeat;
    background-position: -286px -76px;
    background-size: 310px 120px;
    height: 20px;
    width: 20px;
    display: block;
    margin-left: 6px;
    margin-top: 2px;
}